import { Box, Button, Card, Divider, Icon, Pagination, Table, Field, Message } from '@alifd/next';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { Link } from 'ice';
import { FormattedDate, FormattedMessage } from 'react-intl';
import { ResourceType } from '@/pages/BaseManage/ResourceManage/entity';
import { useFusionTable } from 'ahooks';
import Filter from './Filter';
import { resList, DetailVO, deleteRes } from '../services';
import EditDialog from './EditDialog';
import { useState } from 'react';
import ResWarrantDialog from './ResWarrantDialog';

interface Props {
  parentId: number;
}

function List({ parentId }: Props) {
  const field = Field.useField([{}]);
  const [visible, setVisible] = useState<boolean>(false);
  const [warrantVisible, setWarrantVisible] = useState<boolean>(false);
  const [record, setRecord] = useState<DetailVO>();
  const [privilegeId, setPrivilegeId] = useState<number>(-1);
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(resList, {
    field,
    debounceWait: 300,
  });
  const { submit } = search;

  const deleteOne = (id?: number) => {
    deleteRes(id).then(() => {
      Message.success('操作成功');
      refresh();
    });
  };

  return (
    <Card.Content>
      <Filter submit={submit} field={field} parentId={parentId} />
      <Box direction="row" justify="flex-end" align="center" margin={[0, 0, 20, 0]}>
        <Button type="primary" onClick={() => setVisible(true)}>
          <Icon type="add" /> 新增
        </Button>
      </Box>
      <Table
        {...tableProps}
        isZebra
        emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
        primaryKey="id"
      >
        <Table.Column dataIndex="id" title="ID" asyncResizable />
        <Table.Column
          dataIndex="name"
          title="名称"
          asyncResizable
          cell={(value, index, row) => (
            <Link
              to={{
                pathname: `/baseManage/resourceManage/${row.id}`,
                state: { name: value },
              }}
            >
              {value}
            </Link>
          )}
        />
        <Table.Column dataIndex="type" title="资源类型" asyncResizable cell={(val) => ResourceType[val]} />
        <Table.Column dataIndex="uri" title="资源路径" asyncResizable />
        <Table.Column dataIndex="sort" title="排序" asyncResizable />
        <Table.Column dataIndex="status" title="状态" asyncResizable cell={(v) => (v == '1' ? '启用' : '禁用')} />
        <Table.Column dataIndex="remark" title="备注" asyncResizable />
        <Table.Column
          title="创建时间"
          dataIndex="createTime"
          asyncResizable
          cell={(val) => <FormattedDate value={val} dateStyle="short" timeStyle="medium" hourCycle="h24" />}
        />

        <Table.Column
          dataIndex="shippingId"
          title="操作"
          cell={(val, i, row) => (
            <>
              <Button type="primary" text onClick={() => deleteOne(row.id)}>
                删除
              </Button>
              <Divider direction="ver" />
              <Button
                type="primary"
                text
                onClick={() => {
                  setRecord(row);
                  setVisible(true);
                }}
              >
                编辑
              </Button>
              <Divider direction="ver" />
              <Button
                type="primary"
                text
                onClick={() => {
                  setWarrantVisible(true);
                  setPrivilegeId(row.id);
                }}
              >
                授权
              </Button>
            </>
          )}
        />
      </Table>
      <Pagination
        style={{ marginTop: 16, textAlign: 'right' }}
        shape="arrow-only"
        totalRender={(total) => <FormattedMessage id="page.total" tagName="div" values={{ total }} />}
        {...paginationProps}
      />
      <EditDialog
        visible={visible}
        parentId={parentId}
        record={record}
        onRefresh={refresh}
        onClose={() => {
          setRecord(undefined);
          setVisible(false);
        }}
      />

      <ResWarrantDialog visible={warrantVisible} onClose={() => setWarrantVisible(false)} privilegeId={privilegeId} />
    </Card.Content>
  );
}

export default List;
